<template>
    <div class="swiper_news">
        <swiper ref="newsSwiper" :options="newsSwiperOptions" :style="{ height: height + 'px' }">
            <swiper-slide class="slide_news">
                <div class="content_wrap">
                    <div class="title">
                        广州国际投资年会首次设立日本分会场 华智科技载誉承办圆满成功1
                    </div>
                    <div class="sub_title">
                        习近平总书记指出，中国式现代化是物质文明和精神文明相协调的现代化。今年以来，习近平总书记首次论述“建设中华民族现代文明”这个重大命题
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="slide_news">
                <div class="content_wrap">
                    <div class="title">
                        广州国际投资年会首次设立日本分会场 华智科技载誉承办圆满成功2
                    </div>
                    <div class="sub_title">
                        习近平总书记指出，中国式现代化是物质文明和精神文明相协调的现代化。今年以来，习近平总书记首次论述“建设中华民族现代文明”这个重大命题
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="slide_news">
                <div class="content_wrap">
                    <div class="title">
                        广州国际投资年会首次设立日本分会场 华智科技载誉承办圆满成功3
                    </div>
                    <div class="sub_title">
                        习近平总书记指出，中国式现代化是物质文明和精神文明相协调的现代化。今年以来，习近平总书记首次论述“建设中华民族现代文明”这个重大命题
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="slide_news">
                <div class="content_wrap">
                    <div class="title">
                        广州国际投资年会首次设立日本分会场 华智科技载誉承办圆满成功4
                    </div>
                    <div class="sub_title">
                        习近平总书记指出，中国式现代化是物质文明和精神文明相协调的现代化。今年以来，习近平总书记首次论述“建设中华民族现代文明”这个重大命题
                    </div>
                </div>
            </swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
import { getStore } from '@/libs'
export default {
    name: "Slider",
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        cate: {
            type: [String, Number],
            default: 1
        },
        height: {
            type: [String, Number],
            default: 180,
        }
    },
    data() {
        return {
            newsSwiperOptions: {
                // 自动切换
                autoplay: true,
                loop: true,
                delay: 3000,
                // 前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                // 分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                    type: 'fraction'
                },
                // 切换效果cube,mode,flip,fade,creative,coverflow,cards
                effect: 'fade',
                // cubeEffect: {
                //     slideShadows: true,
                //     shadow: true,
                //     shadowOffset: 100,
                //     shadowScale: 0.7
                // },
            }
        }
    },

    created() {

    },
    methods: {
        /**
         * 获取数据
         */
        async getSwiper() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/siteswiper/list',
                method: 'GET',
                params: {cate: this.cate, terminal, country}
            })
            if (this.ResultMessage(res, false)) {
                if(res.data) {
                    this.swiperList = res.data
                }
            }
        },
    }
};
</script>

<style lang="scss" scope>
.swiper_news{
    margin: 0;
    padding: 0;
    overflow: hidden;

    .swiper-pagination-fraction{
        display: flex;
        justify-content: flex-start;
        margin-left: 40px;
        top: 87%;
        color: red;
    }
    .swiper-button-prev, .swiper-button-next{
        top: 92.7%;
    }
    .swiper-button-next{
        top: 92.7%;
        left: 60px;
    }
    .swiper-button-prev:after, .swiper-button-next:after {
        font-size: 12px;
        color: red;
    }

    .swiper-slide {
        text-align: center;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;

        .content_wrap{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 130px;

            .title{
                display: flex;
                font-size: 22px;
                font-weight: 900;
                padding: 10px 0;
            }
            .sub_title{
                display: flex;
                color: #888;
            }
        }

    }
}
</style>
